<template>
    <div style="position:relative;height:100%" class="flex flex-v">
        <Spin size="large" fix v-if="submitting"></Spin>
        <header class="header">
            <a class="btn-back" v-if="isView" @click="prev"><i class="icon icon-left"></i>返回</a>
            <a class="btn-back" v-if="!isView" @click="back"><i class="icon icon-left"></i>返回</a>
                        <a class="btn-save" v-if="isShowCategory" @click="getChecked"><i class="am-icon-save"></i>确定</a>
            <a class="btn-save" v-if="isView" @click="handleSave"><i class="am-icon-save"></i>保存</a>
            <a class="btn-save" v-else @click="handleNew"><i class="am-icon-plus"></i>添加</a>
            <h1 v-html="getTitle"></h1>
        </header>
        <div class="flex1" style="overflow:auto">
            <transition enter-active-class="anim fadeInRight" leave-active-class="anim fadeOutRight">
                <div class="page" v-show="!isView">
                    <pull ref="pull" @onpull="handlePull" :count="count">
                        <div class="input-search"><a class="am-icon-search" @click="handlePull"></a><input ref="keyword" type="text" placeholder="搜索" autocomplete="off" v-model="keyword"></div>
                        <ul class="list">
                            <li v-for="item in datas" :key="item.Id" @click="showInfo(item)"><i class="icon icon-right"></i>{{item.Name}}</li>
                        </ul>
                    </pull>
                </div>
            </transition>
            <transition enter-active-class="anim fadeInRight" leave-active-class="anim fadeOutLeft">
                <div v-if="isView" class="flex1" style="overflow:auto">
                    <div class="page" style="padding:10px;position:relative;">
                        <h3 v-if="item==null" class="am-text-center"><i class="am-icon-spinner am-icon-pulse am-margin-top-xl"></i> 正在加载...</h3>
                        <i-form ref="form" v-model="submitting" class="am-form-h" :action="submitUrl" @success="handleSuccess" v-else>
                            <input type="hidden" name="Id" />
                            <input type="hidden" name="ids" v-model="ids" />
                            <product></product>
                            <form-item label="联系人" :required="true">
                                <input type="text" name="Name" required />
                            </form-item>
                            <form-item label="地址" :required="true">
                                <input type="text" name="Address" required />
                            </form-item>
                            <form-item label="供应产品" :required="true">
                                <i-select :options="products" Name="Products" tree multiple show-checkbox></i-select>
                            </form-item>
                            <form-item label="联系电话">
                                <input type="text" name="Phone" />
                            </form-item>
                            <form-item label="微信">
                                <input type="text" name="WeiXin" />
                            </form-item>
                            <form-item label="Email">
                                <input type="text" name="Email" />
                            </form-item>
                            <form-item label="备注">
                                <input type="text" name="Remark" />
                            </form-item>
                        </i-form>
                    </div>
                </div>        
            </transition>
            <transition enter-active-class="anim fadeInLeft" leave-active-class="anim fadeOutRight">
                <div class="page app-list" v-if="isEdit">
                    <Card>
                        <template slot="title_top">
                            产品列表
                        </template>
                        <Tree ref="showList" :data="productShowList" @on-check-change="checkProduct" show-checkbox multiple></Tree>
                    </Card>
                    <div v-if="isEdit" class="flex1 am-padding-left-xs am-padding-right-xs am-margin-bottom-lg am-margin-top-xl">
                        <button class="am-btn am-btn-danger am-btn-block am-radius" @click="delItem">删除</button>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>
<script>
    import pull from 'components/pull';
    import { getDatas, getInfo, rootUrl, del, getProductTree } from 'api/erp';

    export default {
        components: { pull },
        data() {
            return {
                products: null,
                keyword: '',
                submitting: false,
                submitUrl: rootUrl + 'vender/save',
                isView: false,
                item:null,
                datas: [],
                count: 0,
                isEdit: false,
                productShowList:[],
                ids:null
            }
        },
        computed: {
            getTitle() {
                if (this.isView) {
                    if (this.item.Name)
                        return this.item.Name;
                    else
                        return '添加供货商';
                }
                return '供货商列表';
            }
        },
        watch: {
            keyword(val) {
                this.hanldeSearch();
            }
        },
        methods: {
            hanldeSearch() {
                if (this.$timer) {
                    clearTimeout(this.$timer);
                    this.$timer = null;
                }
                let self = this;
                this.$timer = setTimeout(function() {
                    self.$timer = null;
                    self.handlePull();
                },500);
            },
            prev() {
                this.item = null;
                this.isView = false;
                this.isEdit = false;
            },
            async showInfo(item) {
                let result = await getInfo('vender', item.Id);
                this.item = result.data;
                this.productShowList = result.List;
                this.isView = true;
                this.isEdit = true;
                //获取产品信息
                await this.getProducts();
                this.$nextTick(function () {
                    this.$refs.form.fill(this.item);
                });
            },
            handleNew() {
                this.isView = true;
                this.item = {};
                //获取产品信息
                this.getProducts();
            },
            async getProducts() {
                let result = await getProductTree(this.item.Products);
                this.products = result;
            },
            handleSave() {
                this.$refs.form.submit();
            },
            async loadData(page, cb) {
                try {
                    let result = await getDatas('vender', page, this.keyword);
                    if (result.succ) {
                        if (page > 0)
                            this.datas = this.datas.concat(result.data.datas);
                        else
                            this.datas = result.data.datas;
                        if (cb) cb(result.data.haveMore);
                        this.count = result.data.count;
                    } else {
                        if (cb) cb(true);
                        this.count = 0;
                        this.$Message.error(result.data);
                    }

                } catch (error) {
                    console.log(error)
                }
            },
            handlePull(config) {
                if (!config) {
                    console.log("pull:", this.$refs.pull);  
                    let self = this;
                    config = {page:this.$refs.pull.page, cb:function(haveMore) {
                        self.$refs.pull.loadMore = haveMore;
                    }};
                }
                this.loadData(config.page, config.cb);
            },
            handleSuccess() {
                this.$Message.success('保存成功！');
            },
            delItem(){
                var self = this;
                if(confirm("确认删除该数据？")){
                    let result = del('vender', self.item.Id);
                    if(result){
                        self.loadData(0);
                        self.item = null;
                        self.isView = false;
                        self.isEdit = false;
                    }
                }
            },
            checkProduct(){
                var list = this.$refs.showList.getCheckedNodes().filter(a => a.parent == false);
                var self = this;
                this.ids = new Array();
                list.forEach(a => {
                    console.log(a.id);
                    self.ids.push(a.id);
                });
            }
        },
        mounted() {
            this.handlePull();
        }
    }
</script>
<style>
    html, body, .container { height:100%; overflow:hidden }
</style>
